<template>
	<view>
		<b-navigator :active-index="activeIndex"></b-navigator>
		<b-header></b-header>
		  
		 <view class="main">
		 	<view class="news-list-wrap">
		 		<view v-for="(item, index) in serviceList" class="news-list-item" @click="handleServiceRoute(item.id)" :key="index">
		 			<view class="news-image-wrap"><image class="news-image" :src="baseUrl + item.imgUrl" mode="aspectFill"></image></view>
		 			<view class="news-content">
		 				<view class="news-title">{{ item.title.slice(0,45) }}</view>
		 				<view class="news-des">{{ item.content.slice(0,200) }}</view>
		 				<!-- <button type="default" size="mini" class="read-more-btn" @click="vk.navigateTo('/pages/news/read?id='+item._id)">查看详情</button> -->
		 			</view>
		 		</view>
		 		<el-pagination v-model:current-page="currentPage" 
		 		               v-model:page-size="pageSize" 
		 					   style="display: flex;justify-content: center;; width: 100%; padding: 8px;"
		 		                small layout="prev, pager, next" :total="total"
		 		                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
		 	</view>
		 	<view v-if="hotList.length > 0" class="hot-news">
		 		<view class="hot-news-title">精选服务</view>
		 		<el-divider />
		 		<view class="hot-news-list">
		 			<view v-for="(item, index) in hotList" class="hot-news-item" @click="handleServiceRoute(item.id)" :key="index">
		 				<view class="news-title b-line-1">{{ item.title.slice(0,15) }}</view>
		 				<view class="news-date">{{ item.createTime.slice(5, 10) }}</view>
		 			</view>
		 		</view>
		 	</view>
		 </view>
		 <b-footer></b-footer>
	</view>
</template>

<script>
	import bNavigator from '../../components/b-navigator.vue'
	import bFooter from '../../components/b-footer.vue'
	import bHeader from '../../components/b-header.vue'
	import { noticeList } from '../../config/api'
	import { route } from '@/uni_modules/uview-plus';
	import { baseUrl } from '../../config/config'
	export default {
		components: { bNavigator, bFooter, bHeader },
		data() {
			return {
				activeIndex: '/pages/oldservice/index',
				total: 0,
				currentPage: 1,
				pageSize: 10,
				serviceList: [{title: '服务', content: '内容'}],
				hotList: [{ title: '精选'}],
				baseUrl: baseUrl.slice(0,baseUrl.length-1)
			}
		},
		onLoad() {
			const Params = {
				noticeType: '4',
				pageNum: this.currentPage,
				pageSize: this.pageSize
			}
			noticeList(Params).then(res => {
				this.serviceList = res.rows.slice(6, res.rows.length -1)
				this.hotList = res.rows.slice(0, 5)
				this.total = res.total
				this.serviceList.forEach(item => {
					let re1 = new RegExp("<.+?>", "g");
					let reg = new RegExp('&nbsp;', 'g')// g代表全部
					item.content = item.content.replace(re1, "").replace(reg, ' ');
				})
			
			})
		},
		methods: {
			getServiceList() {
				const Params = {
					noticeType: '4',
					pageNum: this.currentPage,
					pageSize: this.pageSize
				}
				noticeList(Params).then(res => {
					if(this.currentPage === 1) {
					   this.serviceList = res.rows.slice(6, res.rows.length -1)
					} else {
						this.serviceList = res.rows
					}
					
					this.total = res.total
					this.serviceList.forEach(item => {
						let re1 = new RegExp("<.+?>", "g");
						item.content = item.content.replace(re1, "");
					})
				
				})
			},
			handleSizeChange(val) {
			   this.pageSize = val
			   this.getServiceList()
			
			 },
			 handleCurrentChange(val) {
			   this.currentPage = val
			   this.getServiceList()
			 },
			 handleServiceRoute(viewId) {
				 route('/pages/oldservice/view', {
				 	id: viewId
				 });
			 }
		
		}
	}
</script>

<style>
.news-list-wrap {
	width: 65%;

	.news-list-item {
		padding: 20px;
		width: 100%;
		background-color: #ffffff;
		box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
		border-radius: 4px;
		display: flex;
		align-items: flex-start;
		position: relative;

		.news-image-wrap {
			width: 300px;
			margin-right: 20px;
			overflow: hidden;

			.news-image {
				width: 300px;
				height: 200px;
				transition: all 0.3s linear;
			}

			&:hover {
				image {
					transform: scale(1.1);
				}
			}
		}

		.news-content {
			width: 60%;
			position: relative;
			/* height: 200px; */

			.news-date {
				color: #ea6101;
				margin-bottom: 5px;
			}

			.news-date,
			.news-title {
				font-weight: bold;
				margin-bottom: 15px;
			}

			.news-title {
				font-size: 20px;

				&:hover {
					color: #ea6101;
				}
			}

			.news-des {
				font-size: 16px;
				color: #888888;
				margin-bottom: 15px;
			}

			.read-more-btn {
				position: absolute;
				right: 0px;
				bottom: 0px;
			}
		}

		&:after {
			content: '';
			width: 0;
			height: 4px;
			background-color: #ea6101;
			position: absolute;
			left: 0;
			bottom: 0;
			transition: all 0.2s linear;
			border-bottom-right-radius: 4px;
			border-bottom-left-radius: 4px;
		}

		&:hover::after {
			width: 100%;
		}
	}
}
.hot-news {
	font-size: 16px;
	border-radius: 4px;
	padding: 15px;
	width: 28%;
	color: #262626;
	background-color: #ffffff;
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);

	.hot-news-title {
		font-weight: bold;
		padding: 10px 0 20px;
		margin-bottom: 10px;
		font-size: 22px;
		border-bottom: 1px solid $uni-border-color;
	}

	.hot-news-list {
		color: #888888;

		.hot-news-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5px 0;
			margin-bottom: 10px;
			font-size: 16px;

			.news-title {
				width: 80%;
				max-width: 240px;
			}

			&:last-child {
				padding-bottom: 0;
			}

			&:hover {
				font-weight: bold;
				color: #ea6101;
			}
		}
	}
}

@media screen and (max-width: 960px) {
	.main {
		flex-direction: column;
		
	}

	.news-list-wrap {
		width: 87%;

		.news-list-item {
			flex-direction: column;
			padding: 20rpx;

			.news-image-wrap {
				width: 100%;
				height: 250rpx;
				margin-bottom: 20rpx;

				.news-image {
					width: 100%;
					height: 250rpx;
				}
			}

			.news-content {
				width: 100%;
			/* height: 200rpx; */

				.read-more-btn {
					display: none;
				}
			}
		}
	}

	.hot-news {
		width: 85%;
	}
}
</style>
